<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2024-01-24 09:44:26
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2024-01-25 17:22:09
 * @FilePath: \Song-ui\src\components\Alert\Alert.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import type { AlertOptionsProps, AlertEmits } from './type'
import { withDefaults, getCurrentInstance, type Slots, ref } from 'vue'
import Icon from '../Icon/Icon.vue'

defineOptions({
  name: 'SGAlert'
})

// 使用withDefaults定义默认值
const props = withDefaults(defineProps<AlertOptionsProps>(), {
  effect: 'light',
  type: 'info',
  closable: true,
  center: false,
  showIcon: false
})

const emits = defineEmits<AlertEmits>()

const isClose = ref(props.closable)

const { slots } = getCurrentInstance() as { slots: Slots }

// 关闭alert
const close = () => {
  isClose.value = false
  emits('close')
}

// 导出一个close方法
defineExpose({
  close
})
</script>

<template>
  <div
    v-if="isClose"
    class="sg-alert"
    :class="{
      [`sg-alert--${type}`]: type,
      [`sg-alert--${effect}`]: effect,
      'sg-alert--center': center
    }"
  >
    <div
      class="sg-alert__icon"
      :class="{
        [`sg-alert__icon--${effect}`]: effect,
        [`sg-alert__icon--${type}`]: type,
        'sg-alert__icon--large': slots.default || description
      }"
    >
      <Icon
        class="sg-alert__icons"
        :class="{
          [`sg-alert__icons--${effect}`]: effect,
          [`sg-alert__icons--${type}`]: type,
          'sg-alert__icons--large': slots.default || description
        }"
        icon="check"
      />
    </div>
    <div class="sg-alert__content">
      <!-- title -->
      <slot name="title">
        <span
          v-if="content"
          class="sg-alert__title"
          :class="{ 'sg-alert--title-bold': slots.default || description }"
          >{{ content }}</span
        >
      </slot>
      <!-- discription -->
      <slot>
        <p v-if="description" class="sg-alert__description">{{ description }}</p>
      </slot>
      <i v-if="closable" @click="close" class="el-alert__close-btn">
        <Icon icon="xmark" />
      </i>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
